<template>
    <div>
        <h3>学生名字{{ stuData.name }}</h3>
        <h4 ref="stuAge">学生年龄{{ stuData.age }}</h4>
        <h4 >学生id {{ stuData.id }}</h4>
        <button @click="change">change</button>
        <!-- 自定义事件  $emit("自定义事件的名称", 参数: 自定义事件函数的参数changeAge(参数列表)) -->
        <button @click="$emit('changeAge', this)">通知父组件,使用自定义事件</button>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
// 普通定义 vue不会当成响应式
// let name = "张三";
// let age = 10
// 声明响应式的属性
// let id = ref(54112235411)
 
function change(){
    age = 12;
    console.log("将年龄改变成", age);
    id.value = 252
}

// 声明 stuAge 用来绑定元素中的ref属性
let stuAge = ref()
onMounted(()=>{
    // 当模板挂在到vue上时, 再读取定义的ref引用
    console.log("stuAge", stuAge.value.innerHTML);
})


// 声明要接收的属性
let stu = defineProps({
    stuData: {
        name : String,
        age : Number,
        id : Number
    },
    
})
console.log("stu", stu);
</script>

<style  scoped>

</style>